<template>
    <div class="header">
        <a href="#/">
            <img class="logo" src="@/assets/etoak.png" >
            <span class="company">ETOAK学生管理平台</span>
        </a>
        <div class="personal">
            <el-avatar size="small" :src="circleUrl" class="head-icon"></el-avatar>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    用户操作<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item icon="el-icon-edit" command="a">修改密码</el-dropdown-item>
                    <el-dropdown-item icon="el-icon-s-fold" command="b">退出系统</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>

    export default{
        data(){
            return{
                circleUrl:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
            }
        },
        methods: {
            handleCommand(command) {
                switch (command) {
                    case 'a':
                        this.$message(`点击修改密码`)
                        break;
                    case 'b':
                        localStorage.removeItem('etoak_cms_key')
                        this.$message(`系统已退出!`)
                        this.$router.push('/login ')
                        break;
                    default:
                        break;
                }
            }
        }
    }
</script>

<style scoped>
    .logo{

        vertical-align: middle;
        padding: 0px 10px 0 40px;
        width:30px;
    }
    .company {
        position: absolute;
        color: white;
        font-weight:bolder;
    }

    .el-dropdown {
        float: right;
        margin-right: 50px;
    }
    .el-dropdown-link {
        color: white;
        cursor: pointer;
        font-weight: bolder;
    }
    .personal {
        float: right;
    }
    .head-icon{
        border: none;
        margin-top: 10px;
        margin-right: 10px;
    }
</style>